<template>
  <div class="login_container">
    <div class="top_title">
      <div class="chinese_title">苑东生物综合数据管理中台</div>
      <div class="english_title">EASTON BIOPHARMACEUTICALS DATA MANAGEMENT PLATFORM</div>
    </div>
    <div class="login_box">
      <div class="company_title">
        <img src="./loginassets/logo.png" alt="">
      </div>
      <div class="login_form">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户名">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" placeholder="密码">
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.checked">记住密码</el-checkbox>
          </el-form-item>
          <!-- <button class="btn_box" @click="submitForm()" > 登录</button> -->

          <!-- <div class="btn_box"> -->
          <!--  <el-button class="btn_box" @click="submitForm()">登录
            </el-button> -->

          <!-- <el-button  class="el-icon-zsf" @click="submitForm()">登录</el-button> -->
          <!-- </div> -->


        </el-form>


        <div class="btn_box">
          <!-- <button>登录</button> -->
          <button class="green" @click="submitForm()">登录</button>


          </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {}
      }
    },
    methods: {
      // 获取用户名密码
      getuserpwd() {
        if (getCookie('user') != '' && getCookie('pwd') != '') {
          this.ruleForm.username = getCookie('user')
          this.ruleForm.password = getCookie('pwd')
          this.rememberpwd = true
        }
      },
      //获取info列表
      submitForm(formName) {
        if (true) {
          this.logining = true
          // 测试通道，不为空直接登录
          setTimeout(() => {
            this.logining = false
            this.$store.commit('login', 'true')
            this.$router.push({
              path: '/goods/Goods'
            })
          }, 1000)
        } else {
          // 获取图形验证码
          this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }

      },
    }


  }
</script>

<style lang="scss" scoped>
  .login_container {
    width: 100%;
    height: 100%;
    background: url('./loginassets/loginbg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10%;
    padding-top: 50px;
    position: relative;
  }

  .top_title {
    position: absolute;
    top: 40px;
    left: 64px;
  }

  .top_title .chinese_title {
    width: 453px;
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 50px;
    letter-spacing: 1px;
  }

  .top_title .english_title {
    width: 449px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 20px;
  }

  .login_box {
    width: 430px;
    height: 566px;
    background: rgba(120, 167, 255, 0.25);
    border: 4px solid;
    border-image: linear-gradient(135deg, rgba(0, 186, 240, 1), rgba(0, 133, 221, 1)) 4 4;
  }

  .company_title {
    margin: 101px 0 0 105px;
  }

  .login_form {
    width: 346px;
    margin: 0 auto;
    margin-top: 52px;
  }

  .input-icon {
    height: 57px;
    width: 15px;
    margin-left: 2px;
    color: #fff;
  }

  ::v-deep.el-input {
    width: 346px !important;
    height: 57px !important;

  }

  ::v-deep.el-checkbox__label {
    color: #fff;
  }

  ::v-deep.el-input--medium .el-input__inner {
    width: 346px !important;
    height: 57px !important;
    color: #FFFFFF;
    background-color: rgba(114, 185, 255, 0.39) !important;
    border: 1px solid transparent !important;
  }

  ::v-deep.el-input__inner::placeholder {
    color: #fff !important;
  }

  .btn_box {
    width: 346px;
    height: 59px;
    // background: url('./loginassets/btnbg.png') no-repeat;
    // background-size: 100% 100%;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    font-family: LucidaGrande;
    color: #FFFFFF;
  }
button {
  border: 0;
  margin: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 50px;
  border-radius: 50px;
  color: white;
  outline: none;
  position: relative;
}

button:before{
  content: '';
  display: block;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 25%);
  background-size: 210% 100%;
  background-position: right bottom;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  border-radius: 50px;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.green {
   background-image: linear-gradient(to right, #25aae1, #1ee498);
   box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.green:hover:before {
  background-position: left bottom;
}


</style>
